<template>
  <div id="home">
    <div class="home-carousel">
      <el-carousel :interval="5000"
                   height="3.75rem"
                   arrow="always"
                   indicator-position="none">
        <el-carousel-item>
          <img src="../assets/images/轮播图1.jpg"
               alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/images/轮播图2.jpg"
               alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/images/轮播图4.jpg"
               alt="">
        </el-carousel-item>
      </el-carousel>
      <div class="search">
        <el-input v-model="fullName"
                  class="search-input"
                  placeholder="请输入感兴趣的品牌、车系">
          <el-button slot="append"
                     @click="fullNameSearch">
            立即搜索
          </el-button>
        </el-input>
      </div>
    </div>
    <div class="home-recommend">
      <el-row class="recommend-title">
        <el-col :span="15">
          <div>
            <span @click="$router.push('/buyCar')">
              我要买车<i class="el-icon-caret-right" />
            </span>
          </div>
        </el-col>
        <el-col :span="9">
          <div>
            <span @click="$router.push('/salesCar')">
              我要卖车<i class="el-icon-caret-right" />
            </span>
          </div>
        </el-col>
      </el-row>
      <el-row class="recommend-body">
        <el-col :span="15"
                class="recommend-body-left">
          <ul class="list">
            <li v-for="(item,index) in carList"
                :key="index"
                class="list-item"
                @click="searchCar(item)">
              <img :src="item.img">{{ item.name }}
            </li>
          </ul>
        </el-col>
        <el-col :span="9"
                class="recommend-body-right">
          <el-input v-model="carBookingStr.phone"
                    class="book-input"
                    placeholder="请输入您的手机号码" />
          <el-button @click="bookingSale">
            立即预约
          </el-button>
          <div class="sale-img">
            <span @click="$router.push('/salesCar')">
              <img src="../assets/images/sale.png"
                   alt="">
            </span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { addCarBooking } from '@/api/carbooking';

  export default {
    name: 'home',
    data() {
      return {
        carList: [
          {
            name: '丰田',
            brandId: 3,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_89.png',
          },
          {
            name: '本田',
            brandId: 14,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_59.png',
          },
          {
            name: '宝马',
            brandId: 15,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_38.png',
          },
          {
            name: '奔驰',
            brandId: 36,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_47.png',
          },
          {
            name: '大众',
            brandId: 1,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_84.png',
          },
          {
            name: '奥迪',
            brandId: 33,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_62.png',
          },
          {
            name: '日产',
            brandId: 63,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_15.png',
          },
          {
            name: '别克',
            brandId: 38,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_34.png',
          },
          {
            name: '福特',
            brandId: 8,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_98.png',
          },
          {
            name: '保时捷',
            brandId: 40,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_22.png',
          },
          {
            name: '现代',
            brandId: 12,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_55.png',
          },
          {
            name: '雪佛兰',
            brandId: 71,
            img: '//s6.xinstatic.com/xin/images/brand-55/b_73.png',
          },
        ],
        fullName: '',
        carBookingStr: {
          phone: '',
        },
      };
    },
    methods: {
      searchCar(item) {
        this.$router.push({
          path: '/buyCar',
          query: {
            brandName: item.name,
            brandId: item.brandId,
          },
        });
      },
      fullNameSearch() {
        this.$router.push({
          path: '/buyCar',
          query: {
            fullName: this.fullName,
          },
        });
      },
      bookingSale() {
        const { phone } = this.carBookingStr;
        if (!phone) {
          this.$message.error('手机号不能为空!');
          return;
        }
        if (!/^\d{11}$/.test(phone)) {
          this.$message.error('手机号码格式不正确!');
          return;
        }
        const carBookingStr = {
          phone,
        };
        addCarBooking({ carBookingStr }).then(data => {
          if (data.success) {
            this.$alert('预约成功，稍后将会有工作人员与您联系，请保持电话畅通，谢谢！', '提示', {
              type: 'success',
              center: true,
              showConfirmButton: false,
              callback: () => { },
            });
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
#home {
  height: 7rem;
  min-width: 14rem;
  position: relative;
  .home-carousel {
    position: relative;
    img {
      width: 100%;
      min-width: 12rem;
      min-height: 3.75rem;
    }
    .search {
      z-index: 2;
      width: 6rem;
      position: absolute;
      left: 32%;
      top: 48%;
      opacity: 0.95;
    }
  }
  .home-recommend {
    position: absolute;
    z-index: 3;
    height: 3rem;
    width: 10rem;
    top: 3.25rem;
    left: 50%;
    transform: translateX(-5rem);
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #dfe3e3;
    box-shadow: 0 1px 4px 0 rgba(88, 100, 117, 0.2);
    border-radius: 6px;
    .recommend-title {
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.22rem;
      color: #181818;
      letter-spacing: 0.75px;
      font-weight: 700;
      div {
        padding-left: 0.2rem;
        span {
          cursor: pointer;
        }
      }
    }
    .recommend-body {
      .recommend-body-left {
        height: 2.2rem;
        border-right: solid #ebebeb;
        border-width: 1px 1px 0 0;
        padding: 0 4%;
        .list {
          width: 100%;
          margin: 0 auto;
          font-size: 0.14rem;
          .list-item {
            display: inline-block;
            width: 16.65%;
            margin: 0 auto;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #ff5a37;
            }
            img {
              width: 0.48rem;
              height: 0.48rem;
              display: block;
              margin: 10px auto 8px;
            }
          }
        }
      }
      .recommend-body-right {
        padding-left: 0.4rem;
        .book-input {
          width: 2rem;
        }
        button {
          height: 0.5rem;
          margin-left: 0.1rem;
          font-size: 0.15rem;
          color: #fff;
          background: #f0d8a1;
        }
        .sale-img {
          margin-top: 0.5rem;
          img {
            width: 3.1rem;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
#home {
  .home-carousel {
    .search {
      .search-input {
        height: 0.5rem;
        .el-input__inner {
          font-size: 0.16rem;
          height: 0.5rem;
        }
        .el-input-group__append {
          background: #ff5a37;
          color: #fff;
          font-size: 0.16rem;
        }
      }
    }
  }
  .book-input {
    .el-input__inner {
      height: 0.5rem;
      font-size: 0.15rem;
      background: #f5f5f7;
    }
  }
}
</style>

